<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <div id="main1" style="width: 300px;height: 300px;">

      </div>
      <div id="main2" style="margin-left: 150px;
      width: 300px;height: 300px;">

      </div>
    </el-row>
    <el-button type="warning" @click="returnRole" plain>关闭</el-button>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "RoleChartsView",
  data() {
    return {}
  },
  methods: {
    returnRole(){
      this.$router.push("role");
    },
    //根据用户统计角色数
    getRoleCountByUser(){
      this.axios.get("http://localhost:8181/role/getRoleCountByUser").then(r=>{
        this.getRole(r.data.data);
      })
    },
    getRole(data){
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '根据用户统计角色数',
            type: 'pie',
            radius: [20, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: data
          }
        ]
      };

      option && myChart.setOption(option);

    },
    //根据角色统计用户数
    getUserCountByRole(){
      this.axios.get("http://localhost:8181/role/getUserCountByRole").then(r=>{
        this.getUserCount(r.data.data);
      })
    },
    getUserCount(data){
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: [
          {
            text: '根据角色统计用户数'
          }
        ],
        polar: {
          radius: [30, '80%']
        },
        radiusAxis: {
          max: 4
        },
        angleAxis: {
          type: 'category',
          data: data.x,
          startAngle: 75
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: data.y,
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        },
        animation: false
      };

      option && myChart.setOption(option);

    },
  },
  created() {
    this.getRoleCountByUser();
    this.getUserCountByRole();
  }
}
</script>

<style scoped>

</style>